<template>
  <div class="full~">
    <n-grid cols="2 s:3 m:4 l:5 xl:6 2xl:7" responsive="screen" x-gap="12" y-gap="8">
      <n-grid-item v-for="(item, index) of filterList" :key="index">
        <n-card :bordered="false" content-style="padding: 0;">
          <group-member-item :id="item.id"
                             :manageable="manageable"
                             :cover="item.cover"
                             :mobile="item.mobile"
                             :nickname="item.nickname"/>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, PropType, ref, toRefs} from 'vue'
import {UserBase} from "@/type"
import {NAvatar, NButton, NCard, NGrid, NGridItem} from "naive-ui"
import GroupMemberItem from "@/pages/group/components/GroupMemberItem.vue";

export default defineComponent({
  name: "GroupMember",
  components: {GroupMemberItem, NCard, NGrid, NGridItem, NAvatar, NButton},
  props: {
    list: {
      type: Array as PropType<UserBase[]>,
      required: true
    },
    manageable: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const {list, manageable} = toRefs(props)
    const filterList = computed(() => {
      return list.value.map((item) => {
        return {
          ...item,
          nickname: item.nickname || "---"
        }
      })
    })
    const hover = ref(false)
    const maskShow = computed(() => {
      return manageable.value && hover.value
    })

    return {
      filterList,
      hover,
      maskShow
    }
  }
})
</script>

<style scoped>

</style>